<template>
  <div class="c-buddy__list">
    <div class="info__header">
      <div class="info__desc">
        <div class="u-first_titile">{{ '新的朋友' }}</div>
      </div>
      <div class="info__header__utils">
        <!-- 工具栏 -->
        <Icon use="gengduo-sangedian" size="2em" />
      </div>
    </div>
    <div class="info__chat">
      <div class="buddy__item" v-for="item in list">
        <template v-if="item?.initiator?.userId === userStore?.user?.userId">

          <Images :src="item?.receiver?.avatar" />
          <div class="buddy__item__main">
            <span class="item__name" v-text="item?.receiver?.nickName ?? item?.receiver?.userName"></span>
            <span class="item__remark" v-text="item?.remark"></span>
          </div>
        </template>
        <template v-if="item?.receiver?.userId === userStore?.user?.userId">
          <Images :src="item?.initiator?.avatar" />
          <div class="buddy__item__main">
            <span class="item__name" v-text="item?.initiator?.nickName ?? item?.initiator?.userName"></span>
            <span class="item__remark" v-text="item?.remark"></span>
          </div>
        </template>

        <div class="buddy__item__utils">
          <!-- 已添加 接受  待同意 -->
          <!-- {{ item.initiator }}
          {{ item.receiver }} -->
          <span class="buddy__agreed"
            v-if="item.status === 0 && userStore?.user?.userId === item.initiator.userId">待同意</span>
          <!-- 我是接收人才会显示 -->
          <button class="buddy__accept" v-if="item.status === 0 && userStore?.user?.userId === item.receiver.userId"
            @click="receiverEvent(item)">接受</button>
          <button class="buddy__accept" style="background-color: red;"
            v-if="[0].includes(item.status) && userStore?.user?.userId === item.receiver.userId"
            @click="rejectEvent(item)">拒绝</button>
          <span class="buddy__addEd" v-if="item.status === 1">已添加</span>
          <span class="buddy__addEd" v-if="item.status === 2" style="color: red;">已拒绝</span>
          <!-- 我这边显示对面头像 -->
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import Icon from '@/components/SVG/index.vue';
import Images from '@/components/Images/index.vue'
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/pinia/userStore.js'
import { getBuddyListALLApi, updateBuddyByIdAndStatusApi } from '@/api/buddy.js'
import { useRouter } from 'vue-router';
const list = ref([]);
const userStore = useUserStore();
const router = useRouter();
console.log(router);
async function getBuddyList () {
  const res = await getBuddyListALLApi()
  console.log(res);
  list.value = res;
}
// 同意
async function receiverEvent (e) {
  await updateBuddyByIdAndStatusApi({ id: e.id, status: 1 })
  router.go(0)
}
// 拒绝
async function rejectEvent (e) {
  await updateBuddyByIdAndStatusApi({ id: e.id, status: 2 })
  router.go(0)

}

// 三个状态  0 待同意  1 接受  2 已添加(同意) 3 拒接
onMounted(() => {
  // 发送请求
  getBuddyList();
})
</script>

<style lang="scss" scoped>
.c-buddy__list {
  width: 100%;
  height: 100%;
  background-color: $theme-color;
  // box-shadow: -1px 0px 1px 0px $shadow-border;
  display: grid;
  grid-template-rows: 55px 1fr max-content;

  .info__header {

    border-bottom: 1px solid $shadow-border;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

  }

  .info__chat {
    padding: 10px 20px;
    overflow-y: scroll;
    transform: all 1s linear;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.buddy__item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;

  &__main {
    text-align: left;
    flex: 1 1 0;

    .item__name {
      font-size: 16px;
      margin-bottom: 6px;
      display: block;
    }

    .item__remark {
      display: block;
      font-size: 12px;
      color: #976060;
    }
  }

  &__utils {
    font-size: 14px;

    .buddy__addEd {
      color: #976060;
    }

    .buddy__accept {
      padding: 4px 10px;
      margin: 0 4px;
      background-color: #1aad19;
      color: white;
      border: none;
      outline: none;
      border-radius: 2px;

      &:hover {
        border: none;
      }
    }

    .buddy__agreed {
      color: blue;
    }

  }
}
</style>